<!-- 节目预览 -->
<template>
  <el-dialog
    v-el-drag-dialog
    class="showDialog"
    title="节目预览"
    :visible="visible"
    width="900px"
    @update:visible="updateVisible"
    @click="clearTemp"
    v-if="visible"
    :append-to-body="appendToBody"
    >
    <div class="pre-box">
      <div class="pre-box-view">
        <div class="pre-box-view__table">
          <template-preview-main
            ref="templateMain"
            :twidget="twidget"
            :template-opts="templateOpts">
          </template-preview-main>
        </div>
      </div>
      <div class="pre-box-info">
        <el-tooltip :content="preData.name" placement="bottom">
          <p style="height:16px;">名称: {{ preData.name }}</p>
        </el-tooltip>
        <p>类型: {{ preData.type | getTypeName }}</p>
        <p :title="preData.comment">描述: {{ preData.comment }}</p>
        <p>创建时间: {{ preData.createdAt }}</p>
        <p>被使用: {{ preData.refCount }}</p>
        <p>有效性: {{ preData.validity ? '有效' : '无效' }}</p>
        <p>审核: {{ preData.auditState | auditStateFilter }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import TemplatePreviewMain from '../../components/TemplatePreviewMain'
import MediaApi from '@/api/media'
import {widgetNameMap} from '../const'
import CommonApi from '@/api/common'
import { fileTypeOpts, FILETYPE } from '../../media-center/const'

export default {
  components: {
    TemplatePreviewMain
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    preData: {
      type: Object,
      default: () => {
        return {
          name: '',
          type: 0,
          comment: '',
          refCount: 0,
          auditState: 0,
          createdAt: '',
          validity: false
        }
      }
    }
  },
  data() {
    return {
      twidget: [
      ],
      templateOpts: {
        width: 4000,
        height: 4000
      },
      templateForm: {},
      templateName: '',
      fullScreen: false,
      appendToBody: true
    }
  },
  filters: {
    auditStateFilter(val) {
      let msg = ''
      switch(val){
        case 0:
          msg = '待审核'
          break
        case 1:
          msg = '审核通过'
          break
        case -1:
          msg = '审核不通过'
          break
      }
      return msg
    },
    getTypeName(v) {
      let fileType = fileTypeOpts.find(item => item.value == v)
      return fileType ? fileType.label : v
    },
    validityFilter(val,te) {
      if(val) {
        return te('有效')
      }
      return te('无效')
    }
  },
  watch: {
    visible(v) {
      if(v) {
        this.loadProgram()
      }
    }
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    clearTemp() {
      this.$refs.templateMain.__resetWidget()
      this.twidget = []
      this.templateOpts = {
        width: 4000,
        height: 4000
      }
      this.updateVisible(false)
    },
    async loadProgram() {
      const v = await MediaApi.getProgramInfo({id: this.preData.id})
      if(v) {
        this.initTemplateInfo({
          argus: v.templateArgus,
          name: v.templateName,
          type: v.templateType,
          width: v.templateWidth,
          height: v.templateHeight,
          id: v.templateId
        })
        this.initProgramData(v.programMedia)
      }
    },
    // 初始化模板
    initTemplateInfo({argus, name, type, width, height, id}) {
      this.$refs.templateMain.__resetWidget()
      // 节目名称默认和模板名称相同
      this.templateName = name? name.replace(/\.tpl$/, '') : ''
      this.twidget = JSON.parse(argus)
      this.templateOpts = {
        width,
        height
      }
    },
    // 节目播放
    initProgramData(programMedia) {
      if(!programMedia) {
        return
      }
      programMedia.forEach(item => {
        const areaId = (item.areaId).split('-')
        const type = areaId[0]
        const index = areaId[1]
        this.initActive(type, index, item)
      })
    },
    async initActive(type, index, item) {
      // 素材重新获取token
      let mediaArgus = item.mediaArgus
      if(mediaArgus) {
        for(let i=0; i<mediaArgus.length; i++) {
          const path = await this.getTokenPath(mediaArgus[i]._info ? mediaArgus[i]._info.path : '')
          mediaArgus[i]._info.path = path
        }
      }
      item.mediaArgus = mediaArgus
      const programItem = {
        ...item
      }
      const elementOpts = {
        type: type,
        index: index,
        programItem: programItem
      }
      
      this.$refs.templateMain.__widgetSetElement(elementOpts)
    },
    getTokenPath(path) {
      return new Promise((resolve) => {
        if(!path) {
          resolve('')
        }
        CommonApi.previewToken({path: encodeURIComponent(path)}).then(data => {
          resolve(data)
        })
      });
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
::v-deep  .el-dialog__body {
  padding: 0px !important;
}
.full-screen-btn {
  position: absolute;
  right: 50px;
  top:8px;
  i{ font-size: 14px; color:#666;}
}
.close-btn {
  cursor: pointer;
  position: absolute;
  right: 24px;
  top:9px;
  i{ font-size: 16px; color:#666;}
}
.pre-box {
  display: flex;

  .pre-box-view {
    padding: 10px;
  }

  .showtype-title {
    margin: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__label {
      margin-right: 20px;
    }

    &__value {
      // width: 750px;
      flex: 1;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      border: 1px solid $bg-e9;
    }
  }

  &-view {
    flex: 1;
    position: relative;
    padding: 20px;

    &__table {
      background: $bg-f4;
      min-width: 500px;
      height: 100%;
      .limitImg ::v-deep > img {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }
      .limitVA {
        width: 100%;
        max-height: 500px;
        object-fit: contain;
      }
    }
  }

  &-info {
    flex-basis: 360px;
    width: 360px;
    border-left: 1px solid $bg-e9;
    padding: 30px;
    position: relative;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 0;
    }
  }
}
</style>